<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
      <el-breadcrumb-item>作品管理</el-breadcrumb-item>
    </el-breadcrumb>


    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="图片作品" name="first">
        <div class="paint" >

          <el-row :gutter="20">
            <el-col :span="6" v-for="(o, index) in 6" :key="o" :offset="index > 0 ? 1 :1">
<!--              <el-col :span="6" v-for="item in worklis" :key="item.index" :offset="index > 0 ? 1 :1">-->
              <el-card style="margin-top:50px;" body-style="{ padding: '5px' }">
                <el-button type="danger" icon="el-icon-close" size="mini" style="float: right;margin-right: 0px"  @click="removeUserById(item.stuId)"></el-button>
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" style="margin-top: 10px;height: 280px;width: 100%">
                <div style="padding: 5px;">
                  <p style="height: 20px;width: 100%">
                    <span style="text-align: left">作品名:《》</span>
                  </p>
                  <p style="height: 20px;width: 100%;">
                    <span style="text-align: left">作者：</span>
                  </p>
                  <p style="height: 20px;width: 100%;">
                    <span style="text-align: left">时间：</span>
                  </p>
                  <div style="margin-top: 10px;height: 20px;width: 100%;">
                    <el-switch style="float: right "
                      v-model="value1"
                      @change="userStateChanged(id)"
                      inactive-text="设为优秀作品">
                    </el-switch>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频作品" name="second">
        <div class="media">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 1 :1">
              <!--              <el-col :span="6" v-for="item in worklis" :key="item.index" :offset="index > 0 ? 1 :1">-->
              <el-card style="margin-top:50px;" body-style="{ padding: '5px' }">
                <el-button type="danger" icon="el-icon-close" size="mini" style="float: right;margin-right: 0px"  @click="removeUserById(item.stuId)"></el-button>
                <video-player class="video-player vjs-custom-skin"
                              ref="videoPlayer"
                              :playsinline="true">
<!--                              :options="playerOptions[item.index]"-->
                </video-player>
                <div style="padding: 5px;">
                  <p style="height: 20px;width: 100%">
                    <span style="text-align: left">作品名:《》</span>
                  </p>
                  <p style="height: 20px;width: 100%;">
                    <span style="text-align: left">作者：</span>
                  </p>
                  <p style="height: 20px;width: 100%;">
                    <span style="text-align: left">时间：</span>
                  </p>
                  <div style="margin-top: 10px;height: 20px;width: 100%;">

                    <el-switch style="float: right "
                               v-model="value1"
                               @change="userStateChanged(id)"
                               inactive-text="设为优秀作品">
                    </el-switch>

                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
                         :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="音频作品" name="third">
          <div class="video">
            <el-row :gutter="20">
              <el-col :span="6" v-for="(o, index) in 10" :key="o" :offset="index > 0 ? 1 :1">
                <!--              <el-col :span="6" v-for="item in worklis" :key="item.index" :offset="index > 0 ? 1 :1">-->
                <el-card style="margin-top:50px;" body-style="{ padding: '10px' }">
                  <aplayer v-if='isShow' :music="music[item.index]"></aplayer>
                  <div style="padding: 15px;">
                    <p style="height: 20px;width: 100%">
                      <span style="text-align: left">作品名:《》</span>
                    </p>
                    <p style="height: 20px;width: 100%;">
                      <span style="text-align: left">作者：</span>
                    </p>
                    <p style="height: 20px;width: 100%;">
                      <span style="text-align: left">时间：</span>
                    </p>
                    <div style="margin-top: 10px;height: 20px;width: 100%;">
                      <el-switch style="float: right "
                                 v-model="value1" @change="userStateChanged(scope.row)"
                                 inactive-text="设为优秀作品">
                      </el-switch>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
                            :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
            </el-pagination>
          </div>
      </el-tab-pane>



      <el-tab-pane label="添加作品" name="fourth">
        <!-- 卡片视图区域 -->
        <el-card>

          <!-- 用户列表区域 -->
          <!-- 内容主体区域 -->
          <el-form :model="addForm" :rules="addFormRules" ref="addFormRef"  width="50%"  border stripe>

            <el-form-item label="作品名" prop="workName">
              <el-input v-model="addForm.workName"></el-input>
            </el-form-item>
            <el-form-item label="班级id" prop="classesId">
              <el-input v-model="addForm.classesId"></el-input>
            </el-form-item>
            <el-form-item label="学生id" prop="stuId">
              <el-input v-model="addForm.stuId"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select v-model="addForm.type" placeholder="作品类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文件" prop="picture">
              <input type="file"  @change="getFile($event)" />
            </el-form-item>

          </el-form>

          <!-- 底部区域 -->
          <el-row :gutter="20" >
            <el-col :span="4" >
              <el-button type="primary" @click="addUser()" id="upload">新增新闻</el-button>
            </el-col>
          </el-row>

          <!-- 分页区域 -->
        </el-card>

      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="提示"
      :visible.sync="deleteDialogVisable"
      width="30%"
      center>
      <span style="margin-left: 15%;font-size: 20px;">确定要删除该作品吗?</span>
      <span slot="footer" class="dialog-footer">
          </span>
      <span slot="footer" class="dialog-footer">
   <el-button @click="deleteDialogVisable = false">取 消</el-button>
          <el-button type="danger" @click="deleteWork(selectedid)">删除</el-button>
  </span>
    </el-dialog>



  </div>


</template>

<script>
    let Base64 = require('js-base64').Base64
    import aplayer from 'vue-aplayer'
    export default {
        name: "Works_data.vue",
        components: {
            //别忘了引入组件
            aplayer
        },
        data(){
            return {
                value1: true,
                activeName: 'first',
                deleteDialogVisable:false,
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 6
                },
                editForm:{
                },
                addForm:{

                },
                musicObject:{
                },
                music:[],
                playerObject:{

                },
                playerOptions:[],
                worklist: [],
                typeList: [{
                    value: '1',
                    label: '图片'
                }, {
                    value: '2',
                    label: '视频'
                },{
                  value: '3',
                  label: '音频'
                }

                ]
            };

        },
        created:{
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },

            async getPaintList() {
                this.worktype='1'
                const {data: res1} = await this.$axios.get("/work/class/" + this.classId + "?pageNum=1&pageSize=5");
                if (res1.code != 200) {
                    return;
                }
                var total = res1.data.total;
                const {data: res2} = await this.$axios.get('/work/class/' + this.classId + '?pageNum=1&pageSize=' + total,
                    {});
                if (res2.code != 200) {
                    return;
                }
                this.worklist = []
                var j=0
                var ranklist=['非优秀作品','优秀作品']
                for (var i = 0; i < res2.data.total; i++) {
                    if (res2.data.data[i].studentName == this.studentName&&res2.data.data[i].type==1) {
                        const {data: res4} = await this.$axios.get("/teachClass/" + res2.data.data[i].classid);
                        var map = new Map();
                        map.className=res4.data.className
                        map.studentName=res2.data.data[i].studentName,
                            map.name = res2.data.data[i].name
                        map.workid = res2.data.data[i].workid
                        map.index=j++;
                        if (res2.data.data[i].description == '') {
                            map.description = "无描述"
                        }
                        else {
                            map.description = "描述:" + res2.data.data[i].description
                        }
                        map.rank = res2.data.data[i].rank
                        map.rankname=ranklist[res2.data.data[i].rank]
                        map.type = res2.data.data[i].type
                        map.goodstatus = res2.data.data[i].goodstatus;
                        map.url = 'https://stzhang-oss.oss-cn-hangzhou.aliyuncs.com/artschool/' + res2.data.data[i].url;
                        this.worklist.push(map)
                    }
                }
                this.total = this.worklist.length
            },
            /**
             *获取音频作品
             */
            async getMediaList() {
                this.worktype='2'
                const {data: res1} = await this.$axios.get("/work/class/" + this.classId + "?pageNum=1&pageSize=5");
                if (res1.code != 200) {
                    return;
                }
                var total = res1.data.total;
                const {data: res2} = await this.$axios.get('/work/class/' + this.classId + '?pageNum=1&pageSize=' + total,
                    {});
                if (res2.code != 200) {
                    return;
                }
                this.worklist = []
                var ranklist = ['非优秀作品','一级优秀作品', '二级优秀作品', '三级优秀作品']
                this.music=[]
                var j=0
                for (var i = 0; i < res2.data.total; i++) {
                    if (res2.data.data[i].studentName == this.studentName&&res2.data.data[i].type==2) {
                        const {data: res4} = await this.$axios.get("/teachClass/" + res2.data.data[i].classid);
                        var map = new Map();
                        map.className=res4.data.className
                        map.studentName=res2.data.data[i].studentName,
                            map.name = res2.data.data[i].name
                        map.workid = res2.data.data[i].workid
                        map.index=j++;
                        if (res2.data.data[i].description == '') {
                            map.description = "无描述"
                        }
                        else
                        {
                            map.description = "描述:" + res2.data.data[i].description
                        }
                        map.rank = res2.data.data[i].rank
                        map.rankname=ranklist[res2.data.data[i].rank]
                        map.type = res2.data.data[i].type
                        map.goodstatus = res2.data.data[i].goodstatus;
                        map.url = 'https://stzhang-oss.oss-cn-hangzhou.aliyuncs.com/artschool/' + res2.data.data[i].url;
                        this.worklist.push(map)
                        var musicObject={};
                        musicObject.src='https://stzhang-oss.oss-cn-hangzhou.aliyuncs.com/artschool/'+res2.data.data[i].url;
                        musicObject.title=map.name;
                        musicObject.artist= map.studentName;
                        musicObject.lrc='[00:00.00]lrc here\n[00:01.00]aplayer'
                        this.music.push(musicObject)
                        this.isShow=true
                    }
                }
                this.total = this.worklist.length
            },
            /**
             *获取视频作品
             */
            async getVideoList() {
                this.worktype='3'
                const {data: res1} = await this.$axios.get("/work/class/" + this.classId + "?pageNum=1&pageSize=5");
                if (res1.code != 200) {
                    return;
                }
                var total = res1.data.total;
                const {data: res2} = await this.$axios.get('/work/class/' + this.classId + '?pageNum=1&pageSize=' + total,
                    {});
                if (res2.code != 200) {
                    return;
                }
                this.worklist = []
                var j=0
                var ranklist = ['非优秀作品','一级优秀作品', '二级优秀作品', '三级优秀作品']
                for (var i = 0; i < res2.data.total; i++) {
                    if (res2.data.data[i].studentName == this.studentName&&res2.data.data[i].type==3) {
                        const {data: res4} = await this.$axios.get("/teachClass/" + res2.data.data[i].classid);
                        var map = new Map();
                        map.className=res4.data.className
                        map.studentName=res2.data.data[i].studentName,
                            map.name = res2.data.data[i].name
                        map.workid = res2.data.data[i].workid
                        if (res2.data.data[i].description == '') {
                            map.description = "无描述"
                        } else {
                            map.description = "描述:" + res2.data.data[i].description
                        }
                        map.index=j++;
                        map.rank = res2.data.data[i].rank
                        map.rankname=ranklist[res2.data.data[i].rank]
                        map.type = res2.data.data[i].type
                        map.goodstatus = res2.data.data[i].goodstatus;
                        map.url = 'https://stzhang-oss.oss-cn-hangzhou.aliyuncs.com/artschool/' + res2.data.data[i].url;
                        this.worklist.push(map)
                        var playerObject={};
                        //播放速度
                        playerObject.playbackRates=[0.5, 1.0, 1.5, 2.0],
                            //如果true,浏览器准备好时开始回放。
                            playerObject.autoplay=false,
                            // 默认情况下将会消除任何音频。
                            playerObject.muted=false,
                            // 导致视频一结束就重新开始。
                            playerObject.loop=false,
                            // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                            playerObject.preload='auto',
                            playerObject.language='zh-CN',
                            // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                            playerObject.aspectRatio='16:9',
                            // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                            playerObject.fluid=true,

                            //你的封面地址
                            playerObject.poster='',
                            //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                            playerObject.notSupportedMessage='此视频暂无法播放，请稍后再试',
                            playerObject.controlBar=
                                {
                                    timeDivider: true,
                                    durationDisplay: true,
                                    remainingTimeDisplay: false,
                                    //全屏按钮
                                    fullscreenToggle: true
                                }

                        playerObject.sources=
                            {
                                type:'video/mp4',
                                src: 'https://stzhang-oss.oss-cn-hangzhou.aliyuncs.com/artschool/'+res2.data.data[i].url
                            }
                        this.playerOptions.push(playerObject)
                        this.isShow=true
                    }
                }
                this.total = this.worklist.length
            },

            showDeleteDialog(workId)
            {
                this.selectedid=workId
                this.deleteDialogVisable=true;
            },
            async deleteWork(id)
            {
                const {data :res}=await this.$axios.delete('/work?workId='+id)
                if (res.code!=200)
                {
                    this.$message.error("删除该作品失败");
                }
                else
                {
                    if (this.type=='1') {
                        this.getPaintList()
                    }
                    else if (this.type=='2')
                    {
                        this.getMediaList()
                    }
                    else
                    {
                        this.getVideoList()
                    }
                    this.$message.success('删除该作品成功');
                }
                this.deleteDialogVisable=false;
            },
            async userStateChanged(userinfo) {
                // const { data: res } = await this.$http.put(
                //   `users/${userinfo.id}/state/${userinfo.mg_state}`
                // )
                // if (res.meta.status !== 200) {
                //   userinfo.mg_state = !userinfo.mg_state
                //   return this.$message.error('更新班级状态失败！')
                // }
                this.$message.success('更新作品等级成功！')
            },
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getUserList()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getUserList()
            },
        }
    };
</script>

<style >
  .paint{

  }

  .paint .is-active{
    color: #303133 !important;
  }



</style>
